<!--
 * @Author: zyp yangpeng.zhang@fts.aero
 * @Date: 2024-05-29 15:30:08
 * @LastEditors: zyp yangpeng.zhang@fts.aero
 * @LastEditTime: 2024-07-04 16:41:55
 * @FilePath: \vue3-dynamic-module\src\views\home\index.vue
 * @Description: 程式描述
-->
<script setup lang="ts">
const $modulesManager = getCurrentInstance()?.appContext.config.globalProperties.$modulesManager;
const router = useRouter();
const data: any = reactive({
  banner: new URL('@/assets/images/home/3.jpg', import.meta.url).href,
  tabbar: [],
});
const {
  banner,
  tabbar,
} = toRefs(data);

tabbar.value.push(...$modulesManager.getListByPosition('FOOTER_TABBAR'));

// 跳转页面
const gotoPage = (item: any) => {
  router.push({
    path: item.path
  })
}
</script>

<template>
  <div class="home">
    <div class="home-header">
      <img :src="banner" alt="">
    </div>
    <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="flower-o">米袋虽空——樱花开哉！</van-notice-bar>
    <div class="home-wrapper">
      <div class="home-content">
        <van-grid :gutter="10" :border="false">
          <van-grid-item v-for="item in tabbar" :key="item.ref" @click.stop="gotoPage(item)">
            <template #icon>
              <component :is="item.icon"></component>
            </template>
            <template #text>
              <span class="home-content__text">{{item.name}}</span>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  .home-header {
    img{
      width: 100%;
      display: block;
    }
  }

  .super-swiper{
    .super-swiper-slide{
      img {
        width: 100%;
      }
    }
  }
  .home-wrapper{
    flex-grow: 1;
    position: relative;
    .home-content{
      top: 10px;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      overflow: auto;
      .home-content__text {
        opacity: 0.6;
      }
    }
  }
}
</style>
